<template>
  <div class="box">
    <Topbar></Topbar>
    <div class="box1">
      <div class="box1con">
        <img src="group01.png" alt="" />
      </div>
    </div>
    <div class="box2">
      <Grouplist v-for="(v,i) in arr" :key="i" :title1="v.title1" :title2="v.title2" :title3="v.title3" :title4="v.title4" :imgurl="v.imgurl"></Grouplist>
    </div>
    <div class="box2" style="margin-top:0.8rem">
      <Grouplist v-for="(v,i) in arr" :key="i" :title1="v.title1" :title2="v.title2" :title3="v.title3" :title4="v.title4" :imgurl="v.imgurl"></Grouplist>
    </div>
    <div class="box2"  style="margin-top:0.8rem">
      <Grouplist v-for="(v,i) in arr" :key="i" :title1="v.title1" :title2="v.title2" :title3="v.title3" :title4="v.title4" :imgurl="v.imgurl"></Grouplist>
    </div>
  
  </div>
</template>

<script>
import Topbar from "@/components/topbar.vue";
import Grouplist from "@/components/grouplist.vue";


export default {
  components:{
    Topbar,Grouplist
   
  },
  data(){
    return{
       arr :[
      { title1:"租房找室友",title2:"成都租房",title3:"20005人",title4:"3分钟前更新:天府四街临湘出租个人 无中介费哦", imgurl:"group02.png"},
      { title1:"",title2:"北京租房(非中介)",title3:"20005人",title4:"刚刚更新：9号线丰台南路看单桥新华街寺里，次卧出租,压...", imgurl:"group02.png"},
      { title1:"",title2:"深圳福田租房(个人房源免费推广)",title3:"20005人",title4:"刚刚更新:福田福民复试单间整租,2800 可短租", imgurl:"group02.png"},
    ]
    }
      
    
    
  },
  
}
</script>

<style scoped>
.box1 {
  margin-top: 0.8rem;
  width: 100%;
  height: 0.8rem;
  font-size: 0;
}
.box1con {
  width: 90%;
  height: 0.7rem;
  margin: 0 auto;
 
}
.box1con img {
  width: 100%;
  height: 100%;
}



</style>